<template>
  <div class="artist-detail">
    <AppHeader />
    <main class="main-content">
      <div v-if="loading" class="loading">加载中...</div>
      <div v-else-if="error" class="error">{{ error }}</div>
      <template v-else>
        <!-- 歌手信息 -->
        <div class="artist-info">
          <div class="cover">
            <img :src="artist.picUrl" :alt="artist.name">
          </div>
          <div class="info">
            <h1>{{ artist.name }}</h1>
            <div class="stats">
              <span>单曲数：{{ artist.songCount }}</span>
              <span>专辑数：{{ artist.albumCount }}</span>
            </div>
            <div class="desc" v-if="artist.desc">
              <p>{{ artist.desc }}</p>
            </div>
          </div>
        </div>

        <!-- 热门歌曲 -->
        <div class="section">
          <div class="section-header">
            <h2>热门歌曲</h2>
            <div v-if="totalPage > 1" class="pagination">
              <button 
                :disabled="currentPage === 1"
                @click="changePage(currentPage - 1)"
              >上一页</button>
              <span>{{ currentPage }} / {{ totalPage }}</span>
              <button 
                :disabled="currentPage === totalPage"
                @click="changePage(currentPage + 1)"
              >下一页</button>
            </div>
          </div>
          <div class="song-list">
            <div class="list-header">
              <span class="index">#</span>
              <span class="title">歌曲</span>
              <span class="album">专辑</span>
              <span class="duration">时长</span>
            </div>
            <SongItem
              v-for="(song, index) in songs"
              :key="song.id"
              :song="song"
              :index="index + 1"
            />
          </div>
        </div>

        <!-- 专辑列表 -->
        <div class="section">
          <h2>专辑</h2>
          <div class="album-grid">
            <div 
              v-for="album in albums"
              :key="album.id"
              class="album-card"
              @click="router.push(`/album/${album.id}`)"
            >
              <img :src="album.picUrl" :alt="album.name">
              <h3>{{ album.name }}</h3>
              <p>{{ album.publishTime }}</p>
            </div>
          </div>
        </div>
      </template>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { ArtistInfo, SongInfo, AlbumInfo } from '@/types'
import AppHeader from '@/components/AppHeader.vue'
import SongItem from '@/components/SongItem.vue'

const route = useRoute()
const router = useRouter()
const loading = ref(true)
const error = ref('')
const artist = ref<ArtistInfo>({} as ArtistInfo)
const songs = ref<SongInfo[]>([])
const albums = ref<AlbumInfo[]>([])
const currentPage = ref(1)
const totalPage = ref(1)

const fetchArtistData = async () => {
  try {
    const id = route.params.id as string
    loading.value = true
    error.value = ''

    const [artistRes, songsRes, albumsRes] = await Promise.all([
      artistAPI.getArtistDesc(id),
      artistAPI.getArtistSongs(id, currentPage.value),
      artistAPI.getArtistAlbums(id)
    ])

    artist.value = artistRes.data
    songs.value = songsRes.data.list
    totalPage.value = songsRes.data.totalPage
    albums.value = albumsRes.data.list
  } catch (err) {
    console.error('Failed to fetch artist data:', err)
    error.value = '加载失败，请稍后重试'
  } finally {
    loading.value = false
  }
}

const changePage = (page: number) => {
  currentPage.value = page
  fetchArtistData()
}

onMounted(fetchArtistData)
</script>

<style scoped>
.artist-detail {
  min-height: 100vh;
  background: #f5f5f5;
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.artist-info {
  display: flex;
  gap: 30px;
  padding: 30px;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
}

.cover {
  flex-shrink: 0;
  width: 200px;
  height: 200px;
}

.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.info {
  flex: 1;
  min-width: 0;
}

.info h1 {
  font-size: 24px;
  margin-bottom: 16px;
  color: #333;
}

.stats {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
  color: #666;
}

.desc {
  color: #666;
  line-height: 1.6;
}

.section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section h2 {
  font-size: 20px;
  color: #333;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pagination button {
  padding: 4px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.song-list {
  background: #fff;
}

.list-header {
  display: grid;
  grid-template-columns: 60px 1fr 200px 100px;
  padding: 10px;
  border-bottom: 1px solid #eee;
  color: #999;
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 20px;
}

.album-card {
  cursor: pointer;
  transition: transform 0.2s;
}

.album-card:hover {
  transform: translateY(-5px);
}

.album-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
}

.album-card h3 {
  font-size: 14px;
  margin-bottom: 4px;
  color: #333;
}

.album-card p {
  font-size: 12px;
  color: #666;
}

.loading,
.error {
  text-align: center;
  padding: 40px;
  background: #fff;
  border-radius: 8px;
}

.error {
  color: #ff4d4f;
}
</style> 